﻿@model IEnumerable<FM.Core.Expense>
@{
    ViewBag.Title = "Index";
}
<h2>Expense List</h2>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/jquery-ui-1.8.6.custom.css")" rel="stylesheet" type="text/css" />

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "divExpenseList", HttpMethod = "Get" }))
{
    <table>
        <tr>
            <td>
                <div>
                    Start Date: @Html.TextBox("StartDate", Html.Encode(String.Format("{0:yyyy-mm-dd}", ViewData["StartDate"])), new { @class = "ui-datepicker" })
                </div>
            </td>
            <td>
                <div>
                    End Date: @Html.TextBox("EndDate", Html.Encode(String.Format("{0:yyyy-mm-dd}", ViewData["EndDate"])), new { @class = "ui-datepicker" })
                </div>
            </td>
            <td> <input type="submit" value="Search By TransactionDate" /></td>
        </tr>
    </table>
}
<div id="divExpenseList">
    @Html.Partial("ExpenseList", Model)
</div>
<script type="text/javascript">
    $().ready(function () {
        $('.ui-datepicker').datepicker({
            dateFormat: 'yy-mm-dd',
            buttonImage: '@Url.Content("~/Content/calendar.gif")',
            buttonImageOnly: true,
            showOn: "button"
        });
    });
</script>